<!DOCTYPE html>
<html>
<head>
	<title>Dubbo-Console</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="/ztree/ztree.css" rel="stylesheet" type="text/css"/>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/jquery/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="/jquery/jquery-1.7.2.min.js"></script>
    <script src="/jquery/jquery-ui.js"></script>
    <script src="/jquery/jquery.easy-confirm-dialog.js"></script>
    <script src="/ztree/jquery.ztree.core-3.3.min.js"></script>
    <SCRIPT type="text/javascript">
        <!--
        let setting = {
            data: {
                key: {
                    title: "title"
                },
                simpleData: {
                    enable: true
                },
            },
            callback: {
                onClick: function (e, treeId, treeNode) {
                    let content = $("#content").empty().show();
                    let result = $("#result").empty().hide();
                    if (treeNode.pId == null) {
                        content.hide();
                        return;
                    }
					if(treeNode.parameters>0){
						content.append("<p>方法参数值，按顺序依次:</p>");
					}
					for(let i = 0; i < treeNode.parameters; i++){
						content.append("<p><input type='text' value=''/></p>");
					}
					content.append("<p><select id ='invokeType'><option value='POST'>POST</option></select></p>");
					content.append("<p style ='color:red; font-size：50px'>提示：DTO请用json设置</p>");
					content.append("<button id='invokeBtn' class='submit'>invoke</button>");
					$("button.submit", content).on("click", function(){
						let pdata = {};
						pdata.parameters = [];
						$("input", content).each(function(){
							if($(this).attr("id")!='token'){
								pdata.parameters.push($(this).val());
							}
						});
						pdata.url = treeNode.data_url;
						pdata.method = treeNode.data_method;
						pdata.parameterTypes = treeNode.data_parameterTypes.split(',');
						pdata.returnType = treeNode.data_method_return_type;
						let type = $('#invokeType').val();
						$.ajax({
							type:type,
							url:"./invoke?validate=true&app=${appName}",
							data: pdata,
							success: function(m){
								let invoke = JSON.stringify(m);
								if(invoke.returnTypeBasic == true){
									result.text(invoke.invokeData).show();
								}else {
									result.text(JSON.stringify(m.invokeData)).show();
								}
							},
							error: function(m){
								debugger;
								console.log(JSON.stringify(m));
								result.text(JSON.stringify(m)).show();
							}
						});

                    });
                }
            }
        };
		let zNodes =[
			<#list services as x>
				{
					id:${x_index + 1},
					pId:0,
					name:"${x.name}",
					title:"${x.type.canonicalName}",
					isParent:true
				}
				<#if (x.methods?size>0) >,<#elseif x_has_next>,</#if>
					<#list x.methods as m>
						{
							id:${x_index + 1}${m_index + 1}, pId:${x_index + 1},
							data_url:"${x.name}",
							title:"${m.name}(<#list m.parameterTypes as p>${p.canonicalName}<#if p_has_next>,</#if></#list>)",
							data_method:"${m.name}",
							data_method_return_type:"${m.returnType.name}",
							data_parameterTypes: "<#list m.parameterTypes as p>${p.name}<#if p_has_next>,</#if></#list>",
							name:"${m.name}(<#list m.parameterTypes as p>${p.canonicalName}<#if p_has_next>,</#if></#list>)",
							parameters:"${m.parameterTypes?size}"
						}
					<#if m_has_next>, <#elseif x_has_next>, </#if>
				</#list>
			</#list> 
		];

        $(document).ready(function () {
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });
        //-->
    </SCRIPT>
</head>
<body style="font-size:62.5%;padding-top:10px;padding-left:10px;">
<div class="row">
    <div class="span8" style="overflow:hidden">
        <div>
            <p>app: ${appName}</p>
        </div>
        <div>
            <div class="zTreeDemoBackground left">
                <ul id="treeDemo" class="ztree"></ul>
            </div>
        </div>
    </div>
    <div class="span6">
        <div id="content"></div>
        <div id='result' class='' style="display:none;border:1px solid #ddd;width:100%;height:100px;"></div>
    </div>
</div>

</body>
</html>